<template>
    <app-layout title="修改密码">
        <view class="common-form-container">
            <view class="input-item">
                <view class="title-box">
                    <text>验证码</text>
                </view>
                <view class="input-box">
                    <input
                        class="input"
                        v-model="verificationCode"
                        placeholder="请输入验证码"
                        placeholder-class="placeholder-style-3"
                    />
                    <view class="get-code" @click="getVerifyCode">
                        <text class="text active" v-if="canUse">获取验证码</text>
                        <text class="text" v-else>{{ sec }}s后重新获取</text>
                    </view>
                </view>
            </view>
            <view class="input-item">
                <view class="title-box">
                    <text>新密码</text>
                </view>
                <view class="input-box">
                    <input class="input" v-model="password" placeholder="请输入新密码" placeholder-class="placeholder-style-3" />
                </view>
            </view>
        </view>
        <view class="common-save-form-btn">
            <view class="btn" @click="submit">修改</view>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import { mapGetters, mapState } from "vuex";
export default {
    name: "member-password",
    data() {
        return {
            timeTask: null,
            canUse: true,
            sec: 0,
            password: "",
            verificationCode: "",
        };
    },
    components: {
        AppLayout,
    },
    computed: {
        ...mapState({
            userInfo: (state) => state.user.info,
        }),
        ...mapGetters({
            isLogin: "user/isLogin",
        }),
    },
    onLoad() {
        if (!this.isLogin) {
            return this.$store.commit("user/showLoginModal", true);
        }
    },
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    onShareTimeline() {},
    onShareAppMessage() {},
    methods: {
        /**
         * 获取验证码
         */
        getVerifyCode() {
            if (this.canUse) {
                this.$models.user
                    .sendVerificationCode(this.userInfo.mobile)
                    .then((response) => {
                        this.parseTime(60);
                    })
                    .catch((e) => {
                        this.$utils.toast(e);
                    });
            } else {
                this.$utils.toast("请稍后再试");
            }
        },
        /**
         * 倒计时
         */
        parseTime(sec) {
            const that = this;
            this.canUse = false;
            this.sec = sec;
            clearInterval(this.timeTask);
            this.timeTask = setInterval(() => {
                that.sec -= 1;
                if (that.sec <= 0) {
                    that.canUse = true;
                    that.sec = 0;
                    clearInterval(that.timeTask);
                }
            }, 1000);
        },
        /**
         * 修改密码
         */
        submit() {
            this.$models.user
                .resetPassword(
                    {
                        username: this.userInfo.mobile,
                        password: this.password,
                    },
                    this.verificationCode
                )
                .then((message) => {
                    this.$utils.toast(message).then(() => {
                        this.$utils.toPage("", {}, "back");
                    });
                })
                .catch((e) => {
                    this.$utils.toast(e);
                });
        },
    },
};
</script>

<style lang="less" scoped>
.common-form-container {
    .input-item {
        z-index: 5;
        position: relative;
    }
    .get-code {
        z-index: 10;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        display: flex;
        align-items: center;
        .text {
            font-size: 28rpx;
            color: #999999;
        }
        .text.active {
            color: #ffa800;
        }
    }
    .title-box {
        font-weight: normal;
    }
}
</style>